<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${ctx}">
<title>我的事务</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link type="text/css" media="screen" charset="utf-8" rel="stylesheet" href="${ctx}/commons/css/common.css" />
<link type="text/css" media="screen" charset="utf-8" rel="stylesheet" href="${ctx}plugins/fancybox-1.3.4/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="${ctx}plugins/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript" src="${ctx}plugins/fancybox-1.3.4/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="${ctx}plugins/fancybox-1.3.4/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//设置editDIV的宽度和位置
		$("#editDIV").width("360px");
		$("#editDIV").css("margin-left",(document.body.scrollWidth-380)/2);
		//鼠标经过时结果行背景变色
		$(".tb-table>table tr:gt(0)").hover(function() {
			$(this).css("background", "#EEEEEE");
		}, function() {
			$(this).css("background", "");
		});
		$("#showInstance").fancybox({
			'margin'		: 0,
			'width' 		: '80%',
			'height' 		: '90%',
			'autoScale' 	: false,
			'transitionIn' 	: 'none',
			'transitionOut' : 'none',
			'type' 			: 'iframe',
		});
	});
	function showDIV(){
		$("#bg").css("display", "block");
		$("#editDIV").css("display", "block");
	}
	function exitDIV(){
		location.reload();
	}
	//启动流程，注此处是在页面调用“调度台”控制器的start方法，注意，该方法的typeCode参数不能少，typeCode为配置好的事务类型编号
	//你也可以在你自己的控制器或者其他地方直接调用FlowControl下的的startProcess(String affairNo, String typeCode)方法
	//再次启动也调用该方法
	function testStart(affairNo){
		if (Boolean(affairNo)) {
			$.post(
				"dispatcher.htm",
				{
					action : "START",
					affairNo : affairNo,
					typeCode : '${TYPECODE}'
				},
				function(data) {
					if (data == 'Y') {
						alert("启动成功！");
					} else {
						alert("启动失败！可能未配置事务类型或实例已启动。");
					}
					location.reload();
				});
		}
	}
	//取消控制即清除流程实例，注意，该方法的typeCode参数不能少，typeCode为配置好的事务类型编号
	//也可在其他控制器中或者其他地方直接调用FlowControl下的cancleControl方法，效果相同
	function cancelControl(affairNo){
		if (Boolean(affairNo) && confirm("取消控制后，将清除控制实例及操作记录。\n\n您确定要取消对该事务的流程控制吗？")) {
			$.post(
				"dispatcher.htm",
				{
					action : "CANCEL",
					affairNo : affairNo,
					typeCode : '${TYPECODE}'
				},
				function(data) {
					if (data == 'Y') {
						alert("已取消！");
					} else {
						alert("取消失败！");
					}
					location.reload();
				});
		}
	}
	function showInstance(affairNo){
		if(Boolean(affairNo)){
			var obj = $("#showInstance");
			obj.attr("href","${ctx}dispatcher.htm?action=SHOW_INSTANCE&typeCode=${TYPECODE}&affairNo=" + affairNo);
			obj.trigger("click");
		}
	}
	function waitingForMe(){
		window.open("waitingForMe.htm");
	}
	function historyAffair(){
		window.open("historyOfMe.htm");
	}
</script>
<style type="text/css">
	.bg{display: none;position: absolute;z-index: 1001;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;-moz-opacity: 0.7;opacity: .70;filter: alpha(opacity=70);}
	#editDIV{display: none;position: absolute;z-index: 1002;top: 25%;border: 5px solid #E8E9F7;background-color: white;overflow: auto;}
</style>
</head>
<body>
	<h3 class="fn-mt7">
		<span style="float: left; font-size: 14px; font-weight: bold;">我的事务</span>
		<span class="toolbarbtn"><input type="button" onclick="historyAffair()" value="我的已办事务" /></span>
		<span class="toolbarbtn"><input type="button" onclick="waitingForMe()" value="我的待办事务" /></span>&emsp;
		<span class="toolbarbtn"><input type="button" onclick="showDIV()" value="添加事务" /></span>&emsp;
		<br style="height: 0; clear: both;" />
	</h3>
	<c:if test="${affairList != null}">
		<div class="tb-table">
			<table id="tab">
				<thead>
					<tr>
						<th width="30">序 号</th>
						<th>事务编号</th>
						<th>事务名称</th>
						<th width="120">状态</th>
						<th>操&emsp;作</th>
					</tr>
				</thead>
				<tbody>
					<c:choose>
						<c:when test="${fn:length(affairList) > 0}">
							<c:forEach var="af" items="${affairList}" varStatus="str">
								<tr>
									<td align="center"><c:out value="${str.count}" /></td>
									<td align="center"><c:out value="${af.affairNo}" /></td>
									<td align="center"><c:out value="${af.affairName}" /></td>
									<td align="center">
										<c:choose>
											<c:when test="${empty piMap[af.affairNo]}">未启动</c:when>
											<c:otherwise>
												<c:if test="${piMap[af.affairNo] eq 49}">办理中</c:if>
												<c:if test="${piMap[af.affairNo] eq 48}">未通过</c:if>
												<c:if test="${piMap[af.affairNo] eq 50}">已完成</c:if>
											</c:otherwise>
										</c:choose>
									</td>
									<td align="center">
										<!-- 在实例中找不到状态的，说明是未启动的事务，这时应该可以调用“启动流程”的功能 -->
										<c:if test="${empty piMap[af.affairNo]}">
											<a href="javascript:void(0)" onclick="testStart('${af.affairNo}')">启动流程</a>&emsp;
										</c:if>
										<!-- 以下是已存在实例的情况 -->
										<c:if test="${!empty piMap[af.affairNo]}">
											<!-- 当在实例的状态为0时，说明受阻了，这时应该可以调用“再次启动”的功能 -->
											<c:if test="${piMap[af.affairNo] eq 48}">
												<a href="javascript:void(0)" onclick="testStart('${af.affairNo}')">再次启动</a>&emsp;
											</c:if>
											<!-- “取消控制”的功能，只应该在事务的实例的状态为未完成时，才可以调用 -->
											<c:if test="${piMap[af.affairNo] != 50}">
												<a href="javascript:cancelControl('${af.affairNo}')">取消控制</a>&emsp;
											</c:if>
											<!-- “操作详情”功能，只要实例存在都应该可以调用 -->
											<a href="javascript:void(0)" onclick="showInstance('${af.affairNo}')">办理详情</a>&emsp;
										</c:if>
									</td>
								</tr>
							</c:forEach>
						</c:when>
						<c:otherwise>
							<tr>
								<td class="center" colspan="5">没有事务</td>
							</tr>
						</c:otherwise>
					</c:choose>
				</tbody>
			</table>
		</div>
	</c:if>
	<div id="editDIV" class="tb-table" align="center">
		<h3 class="fn-mt7" style="padding: 0;margin: 0;text-align: center;">添加事务</h3>
		<form id="addForm" action="demo/affairTest.htm" method="post">
			<input type="hidden" name="action" value="ADD_AFFAIR" />
			<table>
				<tr>
					<th width="20%">事务名称：</th>
					<td width="80%"><input type="text" class="i-text" name="affairName" value="" style="width: 98%"/></td>
				</tr>
				<tr>
					<th>事务内容：</th>
					<td><textarea name="memo" cols="51" rows="5" style="resize:none;"></textarea></td>
				</tr>
			</table>
			<div class="tb-tfoot-noborder" align="center" style="height: 40px;margin-top: 13px;">
				<span class="btn"><input type="submit" value="提&emsp;交" /></span>
				<span class="btn"><input type="button" onclick="exitDIV()" value="返&emsp;回" /></span>
			</div>
		</form>
	</div>
	<a id="showInstance" href="" style="display: none;"></a>
	<div id="bg" class="bg"></div>
</body>
</html>